<template>
  <div class="account">
    <div>
      <van-nav-bar
        title="Account Record"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="account-card">
      <div class="card-lt">
        <img src="../../assets/imgs/account_rt.png" alt="" srcset="" />
        <div>
          <p>{{ income | getmoney }}</p>
          <p>Income</p>
        </div>
      </div>
      <div class="card-lt">
        <img src="../../assets/imgs/account_lt.png" alt="" srcset="" />
        <div>
          <p>{{ expenditure | getmoney }}</p>
          <p>Expenditure</p>
        </div>
      </div>
    </div>
    <div class="account-tabs">
      <div
        class="tab"
        v-for="(item, i) in tabs"
        :key="i"
        :class="i == activeTab ? 'activeTab' : ''"
        @click="changeTab(i)"
      >
        {{ item }}
      </div>
    </div>
    <div class="account-list">
      <van-pull-refresh
        v-model="refreshing"
        loading-text="loading……"
        pulling-text="Drop down to refresh"
        loosing-text="Free to refresh"
        success-text="Refresh the success"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="No more"
          loading-text="loading……"
          @load="onLoad"
        >
          <div class="account-item" v-for="item in listd" :key="item.id">
            <div class="item-lt">
              <div>
                <i class="iconfont icon-a--" v-if="item.amount < 0"></i>
                <i class="iconfont icon-a-" v-else></i>
              </div>
              <div>
                <p class="title text-only1">{{ item.type_str }}</p>
                <p class="time">{{ item.created_at }}</p>
              </div>
            </div>
            <div class="item-rt">
              <span class="jian" v-if="item.amount < 0">{{
                item.amount | getmoney
              }}</span>
              <span class="jia" v-else>+{{ item.amount | getmoney }}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      tabs: ["Whole", "Income", "Expenditure"],
      type: "whole",
      activeTab: 0,
      current: 1,
      page: 10,
      refreshing: false,
      limit: 10,
      listd: [],
      currentDate: new Date(),
      show: false,
      loading: false,
      finished: false,
      refreshing: false,
      expenditure: 0,
      income: 0,
    };
  },
  mounted() {},
  methods: {
    changeTab(i) {
      this.activeTab = i;
      if (i == 0) {
        this.type = "whole";
      }
      if (i == 1) {
        this.type = "income";
      }
      if (i == 2) {
        this.type = "expenditure";
      }
      this.listd = [];
      this.current = 1;
      this.finished = false;
      this.getPetOrders();
    },
    onLoad() {
      if (this.refreshing) {
        this.listd = [];
        this.refreshing = false;
      }
      this.getPetOrders();
    },
    onRefresh() {
      this.finished = false;
      this.current = 1;
      this.loading = true;
      this.onLoad();
    },
    getPetOrders() {
      this.$store
        .dispatch("accounts", {
          type: this.type,
          page: this.current,
          limit: this.page,
        })
        .then((res) => {
          this.income = res.income;
          this.expenditure = res.expenditure;
          const a = this.listd.concat(res.list);
          this.listd = a;
          this.loading = false;
          this.current += 1;
          if (res.list.length < 10) {
            this.loading = false;
            this.finished = true;
          }

          // if (res.list.length > 0) {
          //   res.list = this.listd.list.concat(res.list);
          //   this.listd = res;
          //   this.loading = false;
          //   this.current += 1;
          // } else if (this.listd.list.length == 0) {
          //   this.listd = res;
          //   this.loading = false;
          //   this.finished = true;
          // } else {
          //   this.loading = false;
          //   this.finished = true;
          // }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.account {
  height: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
}
.account-card {
  width: 345px;
  height: 100px;
  background: #ffffff;
  box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin: 15px auto 15px auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 20px 0;

  .card-lt {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    img {
      margin: 0 10px 0 35px;
      width: 23px;
      height: 23px;
    }
    p:first-child {
      font-size: 20px;
      color: #4a67f5;
    }
    p:last-child {
      font-size: 10px;
      color: #888888;
    }
  }
  .card-lt:first-child {
    border-right: 1px solid #e8e8e8;
  }
}
.account-tabs {
  margin: 0 auto;
  width: 345px;
  height: 44px;
  background: #eff1ff;
  border-radius: 10px 10px 0px 0px;
  font-size: 15px;
  color: #12182c;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.activeTab {
  color: #4a67f5;
}
.account-list {
  margin: 0 15px;
  background-color: #fff;
  padding: 0 14px;
  .account-item {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 10px 0;
    .item-lt {
      display: flex;
      align-items: center;
      i {
        margin-right: 10px;
      }
      .icon-a-- {
        color: #4a67f5;
      }
      .icon-a- {
        color: #ff4f02;
      }
      .title {
        font-size: 15px;
        color: #313131;
        line-height: 16px;
      }
      .time {
        padding: 3px 0 0 0;
        font-size: 13px;
        color: #888888;
      }
    }
    .item-rt {
      font-size: 20px;
      .jian {
        color: #4a67f5;
      }
      .jia {
        color: #ff4f02;
      }
    }
  }
}
</style>